<template>
  <div class="qrcodeContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="table">
      <div class="qrcode" id="qrCodeBox" v-if="qrcodeText"></div>
      <div class="qrcodeElse" v-else>
        <span>此区域内生成</span>
      </div>
      <el-button class="qrcodeBtnLeft" type="danger" @click="cleanQrcode">重置二维码</el-button>
      <el-button class="qrcodeBtnRight" type="warning" @click="beginQrcode">开始生成</el-button>
    </div>
    <div>
      <vue3-tinymce v-model="text" :setting="state.setting" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcodejs2-fix'
import Vue3Tinymce from '@jsdawn/vue3-tinymce'

const route = useRoute()
const router = useRouter()


const text = ref<any>('')
const qrcodeText = ref<any>('')


const creatQrCode = (qrcodeText: string) => {
  document.getElementById('qrCodeBox').innerHTML = '';
  nextTick(() => {
    new QRCode(document.getElementById('qrCodeBox'), {
      text: qrcodeText, // 需要转换为二维码的内容
      width: 150,
      height: 150,
      colorDark: '#000000',
      // colorLight: '#ffffff',
    })
    text.value = ''
  })
}

const state = reactive({
  content: '请输入要生成的内容 ...',
  // editor 配置项
  setting: {

    height: 250, // editor 高度
    language: 'zh-Hans',
    language_url: '/public/langs/zh-Hans.js',
  }
})

const cleanQrcode = () => {
  qrcodeText.value = ''
  text.value = ''
}

const beginQrcode = () => {
  qrcodeText.value = text.value
  nextTick(() => {
    creatQrCode(qrcodeText.value)
  })
}


onMounted(() => {
  // window.showGlobalLoading()
  // if (text.value?.length) {
  //   window.hideGlobalLoading()
  // }
})

</script>

<style lang="scss" scoped>
.qrcodeContent {
  width: 100%;
  .el-card {
    border-radius: $base-card-border-radius;
  }
  .table {
    width: 100%;
    height: 280px;
    margin: 20px 0;
    background: gray;
    position: relative;

    .qrcode {
      position: absolute;
      left: 50%;
      top: 50px;
      transform: translateX(-50%);
      display: inline-block;
      width: 160px;
      height: 160px;
      background-color: #fff;
      opacity: 0.9;
      padding: 5px;
      box-sizing: border-box;
    }

    .qrcodeElse {
      position: absolute;
      left: 50%;
      top: 50px;
      transform: translateX(-50%);
      display: inline-block;
      width: 160px;
      height: 160px;
      border: 1px dashed #1a1419;
      opacity: 0.9;
      padding: 5px;
      box-sizing: border-box;
      text-align: center;

      span {
        font-size: 16px;
        color: #1a1419;
        line-height: 150px;
      }
    }

    .qrcodeBtnLeft {
      margin-top: 5px;
      margin-left: 5px;
      width: 150px;
      height: 50px;
      border-radius: 6px;
    }

    .qrcodeBtnRight {
      width: 150px;
      height: 50px;
      border-radius: 6px;
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }
}
</style>